<template>
  <view>
    <view
      v-if="type == 'super' && teamInfo.level_price && teamInfo.level_price.money"
      class="detailList"
      :style="{
        height: '175rpx',
        background: 'linear-gradient(270deg, rgba(252,233,181,0) 0%, rgba(251,231,176,0.26) 100%)',
      }"
    >
      <view class="newImg" style="width: 224rpx;">
        <image src="../../static/team/cjt.png" mode="" style="width: 224rpx;"></image>
        <view class="" style="color:#E49750">
          超级团
          <image src="../../static/team/hgs.png" mode="" style="width: 44rpx;height: 29rpx;margin-top: 4px;"></image>
        </view>
      </view>
      <view class="item_center">
        <view class="item_title">安蓝车用尿素专享价</view>
        <view class="item_text">
          <view class="">
            钱包支付
            <text style="font-size: 40rpx;color: #E49750;">{{ teamInfo.level_price.money }}</text>
            元/公斤
          </view>
          <view class="" style="margin-top: 7rpx;">
            微信支付
            <text style="font-size: 34rpx;color: #E49750;">{{ teamInfo.level_price.wechat }}</text>
            元/公斤
          </view>
        </view>
      </view>
    </view>
    <view
      class="detailList"
      :style="{
        height: '175rpx',
        background: 'linear-gradient(270deg, rgba(252,239,241,0) 0%, rgba(255,186,186,0.26) 100%)',
        display: type == 'super' ? 'none' : 'block',
      }"
      v-if="teamInfo && teamInfo.new_price && teamInfo.new_price.wechat"
    >
      <!-- 新团特惠 -->
      <view class="newImg" style="width: 320rpx;">
        <image src="../../static/team/ths.png" mode="" style="width: 320rpx;"></image>
        <view class="">
          新团特惠剩余
          <text>{{ teamInfo.new_price.day }}</text>
          天
        </view>
      </view>
      <view class="item_center">
        <view class="item_title">安蓝车用尿素专享价</view>
        <view class="item_text">
          <view class="">
            钱包支付
            <text style="font-size: 40rpx;color: #FF3D3D;">{{ teamInfo.new_price.money }}</text>
            元/公斤
          </view>
          <view class="" style="margin-top: 7rpx;">
            微信支付
            <text style="font-size: 34rpx;color: #FF3D3D;">{{ teamInfo.new_price.wechat }}</text>
            元/公斤
          </view>
        </view>
      </view>
    </view>
    <!-- 当前等级 -->
    <view
      class="detailList"
      :style="{
        height: '190rpx',
        display: type == 'super' ? 'none' : 'block',
      }"
      v-if="teamInfo && teamInfo.level_price && teamInfo.level_price.money"
    >
      <view class="item_top">
        <view class="top_left">
          <view class="">当前等级</view>
          <image :src="teamInfo.level_price.image" mode=""></image>
        </view>
      </view>
      <view class="item_center">
        <view class="item_title">安蓝车用尿素专享价</view>
        <view class="item_text">
          <view class="">
            钱包支付
            <text style="font-size: 40rpx;">{{ teamInfo.level_price.money }}</text>
            元/公斤
          </view>
          <view class="">
            微信支付
            <text style="font-size: 34rpx;">{{ teamInfo.level_price.wechat }}</text>
            元/公斤
          </view>
        </view>
      </view>
    </view>
    <!-- 下一个等级 -->
    <view
      class="detailList"
      :style="{
        height: '190rpx',
        display: type == 'super' ? 'none' : 'block',
      }"
      v-if="teamInfo && teamInfo.next_level_price && teamInfo.next_level_price.score && show"
    >
      <view
        class="item_top"
        @click="
          show
            ? level(
                teamInfo.id,
                teamInfo.name,
                teamInfo.score,
                teamInfo.next_level_price.level,
                teamInfo.level_price.image,
              )
            : ''
        "
      >
        <view class="top_left">
          <view class="">下一等级</view>
          <image :src="teamInfo.next_level_price.image" mode=""></image>
          <view class="">
            还差
            <text>{{ teamInfo.next_level_price.score }}</text>
            环保分
          </view>
        </view>
        <uni-icons type="forward" size="20" v-if="show"></uni-icons>
      </view>
      <view class="item_center">
        <view class="item_title">安蓝车用尿素专享价</view>
        <view class="item_text">
          <view class="">
            钱包支付
            <text style="font-size: 40rpx;">{{ teamInfo.next_level_price.money }}</text>
            元/公斤
          </view>
          <view class="">
            微信支付
            <text style="font-size: 34rpx;">{{ teamInfo.next_level_price.wechat }}</text>
            元/公斤
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/navigator';
const props = defineProps({
  type: { type: String }, //是否是超级团
  display: { type: String }, //是否是
  teamInfo: { type: Object },
  show: {
    type: Boolean,
    default() {
      return true;
    },
  }, //
});
/**
 * 进入下一级别页面
 * @param {number} id 团ID
 * @param {string} name 团名
 * @param {number} num 团环保分
 * @param {number} level 团级别
 * @param {string} img 团级别图片
 */
function level(id: number, name: string, num: number, level: number, img: string) {
  navTo('team/level?id=' + id + '&name=' + name + '&num=' + num + '&leve=' + level + '&img=' + img);
}
</script>

<style scoped lang="less">
.detailList {
  width: 95%;
  margin: 2.5%;
  background: linear-gradient(
    270deg,
    rgba(27, 145, 255, 0) 0%,
    rgba(31, 152, 255, 0) 23%,
    rgba(58, 196, 255, 0.05) 100%
  );
  position: relative;
  .newImg {
    width: 270rpx;
    display: flex;
    justify-content: center;
    position: absolute;
    image {
      width: 270rpx;
      height: 64rpx;
      border-top-left-radius: 5px;
    }
    view {
      font-size: 28rpx;
      font-family: FontName;
      color: #ffffff;
      position: absolute;
      letter-spacing: 2rpx;
      top: -5rpx;
      text {
        font-size: 30rpx;
        margin: 0px 2rpx;
      }
    }
  }
  .item_top {
    width: 100%;
    padding: 5rpx 20rpx 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    .top_left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      image {
        width: 40rpx;
        height: 40rpx;
        margin: 0px 10rpx;
      }
      view:nth-of-type(1) {
        font-size: 28rpx;
        font-weight: 400;
        color: #1b91ff;
      }
      view:nth-of-type(2) {
        font-size: 24rpx;
        font-weight: 400;
        color: #666666;
        margin-left: 20rpx;
        text {
          color: #1b91ff;
        }
      }
    }
  }
  .item_center {
    width: 100%;
    height: 138rpx;
    background: #ffffff;
    box-shadow: 1px 2px 4px 0px rgba(204, 204, 204, 0.5);
    border-radius: 5px;
    padding: 20rpx;
    box-sizing: border-box;
    position: absolute;
    bottom: 0px;
    .item_title {
      font-size: 28rpx;
      font-weight: 400;
      color: #666;
    }
    .item_text {
      display: flex;
      align-items: center;
      view {
        font-size: 24rpx;
        font-weight: 400;
        color: #666666;
        letter-spacing: 3rpx;
      }
      text {
        color: #1b91ff;
      }
      view:nth-of-type(2) {
        margin-left: 20rpx;
      }
    }
  }
}
</style>
